<template>
<div>
  <el-row class="row-bg" type="flex" justify="space-around">
    <el-col :span="24"><div class="demo" style="height: 420px" >
      <span class="center">发生日分析</span>
      <div style="text-align:center;">
        <el-form label-width="80px" inline>
          <el-form-item label="年:">
            <el-input-number
              v-model="form.year"
              controls-position="right"
              :min="0"
              :max="9999"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="月:">
            <el-select v-model="form.month" placeholder="请选择">
              <el-option
                v-for="item in months"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getDay">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <div ref="chart" style="height: 350px;text-align:center;"></div>
      </el-row>
    </div></el-col>
  </el-row>
  <el-row><div style="height: 10px"></div></el-row>
  <el-row>
    <el-col :span="10" ><div class="demo" style="height: 420px;">
      <span class="center">地震类型分析</span>
      <div ref="pchart" style="width: 600px; height: 400px;" ></div>
    </div>
    </el-col>
    <el-col :span="14"><div class="demo" style="height: 420px;">
      <span class="center">震级和深度的关系</span>

      <div ref="dchart" style="width: 900px; height: 400px; text-align:center;" ></div>
    </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
import * as echarts from "echarts/core";
import { getYear } from "@/api/geo/geo";
import { getDay,getType,getSet } from '../../api/geo/geo'
export default {
  name: 'index4',
  data() {
    return {
      chartData: {
        xAxisData: [],
        seriesData: []
      },
      chart2Data: {
      },
      chart3Data: {
      },
      form: {
        startYear: null,
        endYear: null,
        year:null,
        startMonth:null,
        endMonth:null,
        month:null,
        day:null
      },
      months: [{
        value: '1',
        label: '1月'
      }, {
        value: '2',
        label: '2月'
      }, {
        value: '3',
        label: '3月'
      }, {
        value: '4',
        label: '4月'
      }, {
        value: '5',
        label: '5月'
      }, {
        value: '6',
        label: '6月'
      }, {
        value: '7',
        label: '7月'
      }, {
        value: '8',
        label: '8月'
      }, {
        value: '9',
        label: '9月'
      }, {
        value: '10',
        label: '10月'
      }, {
        value: '11',
        label: '11月'
      }, {
        value: '12',
        label: '12月'
      }],


    }
  },

  mounted() {
    this.getDay();
    this.getType();
    this.getSet();
  },

  methods: {
    initChart() {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        xAxis: {
          type: 'category',
          data: this.chartData.xAxisData,
          axisTick: {
            alignWithLabel: true,
            interval: 0, // 强制显示所有标签
            rotate: -45, // 旋转角度，避免标签重叠
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.chartData.seriesData,
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }]
      }
      myChart.setOption(option)
    },
    initPieChat() {
      const chartDom = this.$refs.pchart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        grid: {
          left: '50%', // 图表容器距离页面左边的距离为总宽度的50%
          top: '50%', // 图表容器距离页面顶部的距离为总高度的50%
          containLabel: false // 不包含图表标题在内的所有内容
        },
        series: [
          {
            name: '地震类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.chart2Data
          }
        ]
      };
      // 渲染图表
      myChart.setOption(option)
    },
    initDChat(){
      const chartDom = this.$refs.dchart
      const myChart = echarts.init(chartDom)
      const option = {
        xAxis: {
          scale: true
        },
        yAxis: {
          scale: true
        },
        series: [
          {
            type: 'effectScatter',
            symbolSize: 20,
          },
          {
            type: 'scatter',
            // prettier-ignore
            data: this.chart3Data
          }
        ]
      };
      myChart.setOption(option)
    },
    getDay() {
      let params = {...this.form};
      this.removeZeroProps(params)
      getDay(params).then((res) => {
        this.chartData.xAxisData = res.data[0];
        this.chartData.seriesData = res.data[1];
        this.initChart();
      });
    },
    getType(){
      getType().then((res=>{
        this.chart2Data = res.data;
        this.initPieChat()
      }))
    },
    getSet(){
      getSet().then((res=>{
        this.chart3Data = res.data;
        this.initDChat()
      }))
    },
    removeZeroProps(obj) {
      for (let prop in obj) {
        if (obj[prop] === 0) {
          delete obj[prop];
        }
      }
      return obj;
    },
    reset(){
      this.form = {};
      this.getDay();
    }
  }
}
</script>

<style scoped>
.demo {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  color: #909399;
}
.row-bg {
  padding: 10px 0;
  background-color: #FFFFFF;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
</style>
